<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,100&subset=latin,cyrillic-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
    <style type="text/css">
        .tile {
            cursor: pointer;
            background-size: cover;
            margin: 1px;
            position: relative;
            overflow: hidden;
            float: right;
            -webkit-animation: tileAnimation 700ms ease;
        }
        @-webkit-keyframes tileAnimation {
            0% {
                opacity: 0;
                -webkit-transform: translate(1000px);
            }
            50% {
                opacity: 1;
                -webkit-transform: translate(-40px);
            }
            100% {
                opacity: 1;
                -webkit-transform: translate(0px);
            }
        }
        .overlay {
            width: 100%;
            height: 100%;
            position: absolute;
            background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,0.3) 70%,rgba(0,0,0,0.5) 100%);
            -webkit-transition: all 100ms ease;
            -moz-transition: all 100ms ease;
            transition: all 100ms ease;
        }
        .tile:hover > .overlay {
            width: 100%;
            height: 100%;
            position: absolute;
            background-color: #000;
            opacity: 0.5;
            -webkit-transition: all 500ms ease;
            -moz-transition: all 500ms ease;
            transition: all 500ms ease;
        } 
        .tile:hover > .textWraper > .title {
            -webkit-transition: all 500ms ease;
            -moz-transition: all 500ms ease;
            transition: all 500ms ease;
            padding: 5px;
        } 
        .tile:hover > .textWraper > .subtitle {
            -webkit-transition: all 500ms ease;
            -moz-transition: all 500ms ease;
            transition: all 500ms ease;
        } 
        .tile:hover > .textWraper > .content {
            -webkit-transition: all 500ms ease;
            -moz-transition: all 500ms ease;
            transition: all 500ms ease;
            opacity: 1;
        }
        .tile:hover > .textWraper {
            bottom: 70px;
            -webkit-transition: all 500ms ease;
            -moz-transition: all 500ms ease;
            transition: all 500ms ease;
        }
        .tile:hover > .footer {
            -webkit-transition: all 500ms ease;
            -moz-transition: all 500ms ease;
            transition: all 500ms ease;
            bottom: 0px;
        }
        .tile:hover > .footer > img:last-child {
            opacity: 1;
        }
        .tile:hover > .like {
            -webkit-transition: all 500ms ease;
            -moz-transition: all 500ms ease;
            transition: all 500ms ease;
            right: 0px;
        }
        .title {
            width: auto;
            height: auto;
            color: white;
            font-family: Calibri;
            font-size: 1em;
            font-weight: 900;
            margin-bottom: 10px;
            position: relative;
            overflow: hidden;
            display: block;
            float: left;
            -webkit-transition: all 500ms ease;
            -moz-transition: all 500ms ease;
            transition: all 500ms ease;
        }
        .subtitle {
            width: 100%;
            height: auto;
            color: white;
            font-family: Dotum;
            font-size: 2.2em;
            line-height: 0.9em;
            word-wrap: break-word;
            margin-bottom: 10px;
            position: relative;
            overflow: hidden;
            -webkit-transition: all 500ms ease;
            -moz-transition: all 500ms ease;
            transition: all 500ms ease;
        }
        .content {
            width: 100%;
            height: auto;
            color: white;
            font-family: Calibri;
            font-size: 0.9em;
            font-weight: 100;
            word-wrap: break-word;
            text-align: justify;
            position: relative;
            opacity: 0;
            overflow: hidden;
            -webkit-transition: all 500ms ease;
            -moz-transition: all 500ms ease;
            transition: all 500ms ease;
        }
        .textWraper {
            width: calc(100% - 40px);
            height: auto;
            position: absolute;
            bottom: -20px;
            left: 20px;
            -webkit-transition: all 500ms ease;
            -moz-transition: all 500ms ease;
            transition: all 500ms ease;
        }
        .footer {
            width: 100%;
            height: 50px;
            position: absolute;
            float: left;
            bottom: -51px;
            border-top: dashed 1px white;
            opacity: 1.9;
            -webkit-transition: all 200ms ease;
            -moz-transition: all 200ms ease;
            transition: all 200ms ease;
        }
        .author {
            color: white;
            font-family: Calibri;
            font-size: 0.9em;
            font-weight: 100;
            word-wrap: break-word;
            position: absolute;
            bottom: 0px;
            right: 0px;
        }
        .like {
            width: 100px;
            height: 50px;
            background-color: #000;
            position: absolute;
            top: 0px;
            right: -100px;
            float: left;
            -webkit-transition: all 500ms ease;
            -moz-transition: all 500ms ease;
            transition: all 500ms ease;
        }
        .noOflikes {
            height: 50px;
            width: 50px;
            color: white;
            font-family: Calibri;
            font-size: 1em;
            line-height: 50px;
            text-align: center;
            position: absolute;
            top: 0px;
            right: 0px;
        }
        .like > img {
            margin: 9px;
            opacity: 0.8;
            -webkit-transition: all 100ms ease;
            -moz-transition: all 100ms ease;
            transition: all 100ms ease;
        }
        .like > img:hover {
            opacity: 1;
            -webkit-transition: all 100ms ease;
            -moz-transition: all 100ms ease;
            transition: all 100ms ease;
        }
        .footer > img:first-child {
            margin-left: 20px;
        }
        .footer > img:last-child {
            opacity: 0;
            position: absolute;
            left: 2px;
            top: -23px;
        }
        .footer > img {
            opacity: 0.8;
            margin-top: 9px;
            margin-bottom: 9px;
            margin-left: 6px;
            -webkit-transition: all 100ms ease;
            -moz-transition: all 100ms ease;
            transition: all 100ms ease;
        }
        .footer > img:hover {
            opacity: 1;
            -webkit-transition: all 100ms ease;
            -moz-transition: all 100ms ease;
            transition: all 100ms ease;
        }

        html {
            height: 100%;
            width: 100%;
            -webkit-font-smoothing: antialiased;
        }
        body {
            height: 100%;
            width: 100%;
            padding: 0px;
            margin: 1px;
            overflow-x: hidden;
        }
        #canvas {
            height: auto;
            width: calc(100% - 2px);
            position: absolute;
        }
        #closeBtn {
            position: absolute;
            top: 0px;
            left: 0px;
            margin: 10px;
            cursor: pointer;
        }
        #closeBtn:hover {
            -webkit-filter: invert(50%);
        }
        #tile_details {
            top: 0px;
            left: 146px;
            /*opacity: 0.98;*/
            font-family: Calibri;
            background-color: #e1e1e1;
            height: 100%;
            width: calc(100% - 146px); 
            position: fixed;
            -webkit-animation: canvasOverlayAnimation 200ms ease;
        }
        @-webkit-keyframes canvasOverlayAnimation {
            from {
                opacity: 0;
                -webkit-transform: translate(600px);
            }
            to {
                opacity: 0.98;
                -webkit-transform: translate(0px);
            }
        }
        #tile_details_main_img {
            width: 100%;
            height: 250px;
            background: url("img/img7.jpg");
            background-size: cover;
            position: absolute;
            top: 0px;
            left: 0px;
        }
        #tile_details_main_img_overlay {
            width: 100%;
            height: 250px;
            background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,0.3) 70%,rgba(0,0,0,0.5) 100%);
            position: absolute;
            top: 0px;
            left: 0px;
        }
        #tile_details_main_title {
            padding: 5px;
            color: white;
            font-family: Calibri;
            font-size: 1em;
            font-weight: 900;
            left: 15px;
            position: absolute;
            bottom: 120px;
        }
        #tile_details_main_subtitle {
            color: white;
            font-family: Dotum;
            font-size: 2.2em;
            line-height: 0.9em;
            left: 15px;
            position: absolute;
            bottom: 75px;
        }
        #tile_details_main_author {
            color: white;
            font-family: SWScrpc;
            font-size: 1.1em;
            right: 15px;
            position: absolute;
            bottom: 10px;
            text-align: right;
            cursor: pointer;
        }
        #tile_details_main_author:hover {
            text-decoration: underline;
        }
        #tile_details_main_content {
            width: auto;
            color: black;
            font-family: Calibri;
            font-size: 0.9em;
            line-height: 1.3em;
            top: 250px;
            margin: 15px;
            position: relative;
            -webkit-column-count: 4;
            text-align: justify;
        }
        #registracija_form {
            width: 250px;
            height: 100%;
            position: absolute;
            left: 146px;
            top: 0px;
            background-color: #101010;
        }
        #registracija_form > table {
            width: 100%;
            margin: auto;
            position: relative;
        }
        #registracija_form > table tr td {
            text-align: center;
        }
        #leftNavMenu {
            height: calc(100% + 2px);
            width: 149px;
            margin: 0px;
            background-color: #101010;
            color: white;
            font-family: Calibri;
            position: fixed;
            top: -2px;
            left: -2px;
            text-align: center;
        }
        #leftNavMenu > ul {
            list-style-type: none;
            position: relative;
            margin-top: 40px;
            padding: 0px;
        }
        #leftNavMenu > ul > li > .navMenuItem:hover {
            background-color: #00ccff;
            padding: 5px;
            padding-left: 30px;
            width: calc(100% - 35px);
            -webkit-transition: all 100ms ease;
            -moz-transition: all 100ms ease;
            transition: all 100ms ease;
        }
        #leftNavMenu > ul > li > #aktuelno:hover {
            background-color: #00ccff;
            padding: 5px;
            padding-left: 30px;
            width: calc(100% - 35px);
            -webkit-transition: all 100ms ease;
            -moz-transition: all 100ms ease;
            transition: all 100ms ease;
        }
        #leftNavMenu > ul > li > #bez_stresa:hover {
            background-color: #cc33ff;
            padding: 5px;
            padding-left: 30px;
            width: calc(100% - 35px);
            -webkit-transition: all 100ms ease;
            -moz-transition: all 100ms ease;
            transition: all 100ms ease;
        }
        #leftNavMenu > ul > li > #dijaspora_klub:hover {
            background-color: #ff9933;
            padding: 5px;
            padding-left: 30px;
            width: calc(100% - 35px);
            -webkit-transition: all 100ms ease;
            -moz-transition: all 100ms ease;
            transition: all 100ms ease;
        }
        #leftNavMenu > ul > li > #pomoc_prijatelja:hover {
            background-color: #66cc00;
            padding: 5px;
            padding-left: 30px;
            width: calc(100% - 35px);
            -webkit-transition: all 100ms ease;
            -moz-transition: all 100ms ease;
            transition: all 100ms ease;
        }
        #leftNavMenu > ul > li > #dijaspora_javlja:hover {
            background-color: #ff3333;
            padding: 5px;
            padding-left: 30px;
            width: calc(100% - 35px);
            -webkit-transition: all 100ms ease;
            -moz-transition: all 100ms ease;
            transition: all 100ms ease;
        }
        #leftNavMenu > input[type="text"] {
            margin-top: 50px;
        }
        #leftNavMenu > input[type="text"], [type="password"] {
            width: calc(100% - 35px);
            margin-left: 15px;
            margin-right: 15px;
            margin-bottom: 2px;
            position: relative;
            border-radius: 3px;
            border: none;
            padding: 4px;
            box-shadow: inset 1px 1px 7px rgba(0, 0, 0, 0.5);
        }
        #leftNavMenu > input[type="button"] {
            outline: none;
            width: 100px;
            margin-top: 10px;
            margin-left: auto;
            margin-right: auto;
            position: relative;
            color: white;
            font-family: 'Roboto', sans-serif;
            font-weight: 300;
            font-size: 0.8em;
            background-color: transparent;
            border: solid 2px #101010;
            border-radius: 3px;
            opacity: 0.8;
            padding: 6px;
        }
        #leftNavMenu > input[type="button"]:hover {
            opacity: 1;
            border: solid 2px white;
        }
        #leftNavMenu > input[type="button"]#registracija {
            margin-top: 90px;
            border: solid 2px white;
        }
        .navMenuItem {
            width: 80%;
            height: 16px;
            margin: 15px 0px 0px 0px;
            position: relative;
            opacity: 0.8;
            cursor: pointer;
            padding: 5px;
            padding-left: 15px;
            -webkit-transition: all 100ms ease;
            -moz-transition: all 100ms ease;
            transition: all 100ms ease;
        }
        .navMenuItem > img {
            float: left;
        }
        .navMenuItem > a {
            height: 16px;
            color: white;
            margin-left: 5px;
            font-family: 'Roboto', sans-serif;
            font-weight: 300;
            font-size: 0.8em;
            line-height: 16px;
            text-decoration: none;
            position: relative;
            float: left;
        }
        .navMenuItem:hover {
            opacity: 1;
            -webkit-transition: all 100ms ease;
            -moz-transition: all 100ms ease;
            transition: all 100ms ease;
        }
        #logoContainer {
            cursor: pointer;
        }
        #logo {
            width: 34px;
            height: 34px;
            background-color: white;
            position: relative;
            margin-top: 25px;
            margin-left: 15px;
            float: left;
        }
        #logo_text {
            color: white;
            font-family: Century Gothic;
            font-size: 20px;
            line-height: 20px;
            position: relative;
            text-align: left;
            margin-top: 22px;
            margin-left: 1px;
            float: left;
        }
        #pretraga {
            opacity: 1;
            margin-top: 70px;
        }
        #pretraga > img {
            background-color: #00ccff;
            position: absolute;
            right: 0px;
            top: 5px;
            padding: 4px;
            border-radius: 0px 4px 4px 0px;
        }
        #pretraga > input[type="text"] {
            width: calc(100% - 5px);
            height: 16px;
            border-radius: 3px;
            border: none;
            padding: 4px;
            box-shadow: inset 1px 1px 7px rgba(0, 0, 0, 0.5);
            outline: none;
            -webkit-transition: all 100ms ease;
            -moz-transition: all 100ms ease;
            transition: all 100ms ease;
        }
        #pretraga:hover > img{
            background-color: #66cc00;
            -webkit-transition: all 100ms ease;
            -moz-transition: all 100ms ease;
            transition: all 100ms ease;
        }
        #footerContent {
            width: 100%;
            position: absolute;
            left: 0px;
            bottom: 0px;
            font-family: 'Roboto', sans-serif;
            font-weight: 100;
            font-size: 0.5em;
            text-align: center;
            line-height: 15px;
            opacity: 0.5;
            padding-bottom: 5px;
        }
        #footerContent > a {
            text-decoration: none;
            color: white;
        }

        .windows8 {
            position: relative;
            width: 90px;
            height:90px;
            margin-left: auto;
            margin-right: auto;
        }
        .windows8 .wBall {
            position: absolute;
            width: 86px;
            height: 86px;
            opacity: 0;
            -moz-transform: rotate(225deg);
            -moz-animation: orbit 4.95s infinite;
            -webkit-transform: rotate(225deg);
            -webkit-animation: orbit 4.95s infinite;
            -ms-transform: rotate(225deg);
            -ms-animation: orbit 4.95s infinite;
            -o-transform: rotate(225deg);
            -o-animation: orbit 4.95s infinite;
            transform: rotate(225deg);
            animation: orbit 4.95s infinite;
        }
        .windows8 .wBall .wInnerBall{
            position: absolute;
            width: 11px;
            height: 11px;
            background: #101010;
            left:0px;
            top:0px;
            -moz-border-radius: 11px;
            -webkit-border-radius: 11px;
            -ms-border-radius: 11px;
            -o-border-radius: 11px;
            border-radius: 11px;
        }
        .windows8 #wBall_1 {
            -moz-animation-delay: 1.08s;
            -webkit-animation-delay: 1.08s;
            -ms-animation-delay: 1.08s;
            -o-animation-delay: 1.08s;
            animation-delay: 1.08s;
        }
        .windows8 #wBall_2 {
            -moz-animation-delay: 0.22s;
            -webkit-animation-delay: 0.22s;
            -ms-animation-delay: 0.22s;
            -o-animation-delay: 0.22s;
            animation-delay: 0.22s;
        }
        .windows8 #wBall_3 {
            -moz-animation-delay: 0.43s;
            -webkit-animation-delay: 0.43s;
            -ms-animation-delay: 0.43s;
            -o-animation-delay: 0.43s;
            animation-delay: 0.43s;
        }
        .windows8 #wBall_4 {
            -moz-animation-delay: 0.65s;
            -webkit-animation-delay: 0.65s;
            -ms-animation-delay: 0.65s;
            -o-animation-delay: 0.65s;
            animation-delay: 0.65s;
        }
        .windows8 #wBall_5 {
            -moz-animation-delay: 0.86s;
            -webkit-animation-delay: 0.86s;
            -ms-animation-delay: 0.86s;
            -o-animation-delay: 0.86s;
            animation-delay: 0.86s;
        }
        @-moz-keyframes orbit {
        0% {
            opacity: 1;
            z-index:99;
            -moz-transform: rotate(180deg);
            -moz-animation-timing-function: ease-out;
        }

        7% {
            opacity: 1;
            -moz-transform: rotate(300deg);
            -moz-animation-timing-function: linear;
            -moz-origin:0%;
        }

        30% {
            opacity: 1;
            -moz-transform:rotate(410deg);
            -moz-animation-timing-function: ease-in-out;
            -moz-origin:7%;
        }

        39% {
            opacity: 1;
            -moz-transform: rotate(645deg);
            -moz-animation-timing-function: linear;
            -moz-origin:30%;
        }

        70% {
            opacity: 1;
            -moz-transform: rotate(770deg);
            -moz-animation-timing-function: ease-out;
            -moz-origin:39%;
        }

        75% {
            opacity: 1;
            -moz-transform: rotate(900deg);
            -moz-animation-timing-function: ease-out;
            -moz-origin:70%;
        }

        76% {
            opacity: 0;
            -moz-transform:rotate(900deg);
        }

        100% {
            opacity: 0;
            -moz-transform: rotate(900deg);
        }

        }
        @-webkit-keyframes orbit {
        0% {
            opacity: 1;
            z-index:99;
            -webkit-transform: rotate(180deg);
            -webkit-animation-timing-function: ease-out;
        }

        7% {
            opacity: 1;
            -webkit-transform: rotate(300deg);
            -webkit-animation-timing-function: linear;
            -webkit-origin:0%;
        }

        30% {
            opacity: 1;
            -webkit-transform:rotate(410deg);
            -webkit-animation-timing-function: ease-in-out;
            -webkit-origin:7%;
        }

        39% {
            opacity: 1;
            -webkit-transform: rotate(645deg);
            -webkit-animation-timing-function: linear;
            -webkit-origin:30%;
        }

        70% {
            opacity: 1;
            -webkit-transform: rotate(770deg);
            -webkit-animation-timing-function: ease-out;
            -webkit-origin:39%;
        }

        75% {
            opacity: 1;
            -webkit-transform: rotate(900deg);
            -webkit-animation-timing-function: ease-out;
            -webkit-origin:70%;
        }

        76% {
            opacity: 0;
            -webkit-transform:rotate(900deg);
        }

        100% {
            opacity: 0;
            -webkit-transform: rotate(900deg);
        }

        }
        @-ms-keyframes orbit {
        0% {
            opacity: 1;
            z-index:99;
            -ms-transform: rotate(180deg);
            -ms-animation-timing-function: ease-out;
        }

        7% {
            opacity: 1;
            -ms-transform: rotate(300deg);
            -ms-animation-timing-function: linear;
            -ms-origin:0%;
        }

        30% {
            opacity: 1;
            -ms-transform:rotate(410deg);
            -ms-animation-timing-function: ease-in-out;
            -ms-origin:7%;
        }

        39% {
            opacity: 1;
            -ms-transform: rotate(645deg);
            -ms-animation-timing-function: linear;
            -ms-origin:30%;
        }

        70% {
            opacity: 1;
            -ms-transform: rotate(770deg);
            -ms-animation-timing-function: ease-out;
            -ms-origin:39%;
        }

        75% {
            opacity: 1;
            -ms-transform: rotate(900deg);
            -ms-animation-timing-function: ease-out;
            -ms-origin:70%;
        }

        76% {
            opacity: 0;
            -ms-transform:rotate(900deg);
        }

        100% {
            opacity: 0;
            -ms-transform: rotate(900deg);
        }

        }
        @-o-keyframes orbit {
        0% {
            opacity: 1;
            z-index:99;
            -o-transform: rotate(180deg);
            -o-animation-timing-function: ease-out;
        }

        7% {
            opacity: 1;
            -o-transform: rotate(300deg);
            -o-animation-timing-function: linear;
            -o-origin:0%;
        }

        30% {
            opacity: 1;
            -o-transform:rotate(410deg);
            -o-animation-timing-function: ease-in-out;
            -o-origin:7%;
        }

        39% {
            opacity: 1;
            -o-transform: rotate(645deg);
            -o-animation-timing-function: linear;
            -o-origin:30%;
        }

        70% {
            opacity: 1;
            -o-transform: rotate(770deg);
            -o-animation-timing-function: ease-out;
            -o-origin:39%;
        }

        75% {
            opacity: 1;
            -o-transform: rotate(900deg);
            -o-animation-timing-function: ease-out;
            -o-origin:70%;
        }

        76% {
            opacity: 0;
            -o-transform:rotate(900deg);
        }

        100% {
            opacity: 0;
            -o-transform: rotate(900deg);
        }

        }
        @keyframes orbit {
        0% {
            opacity: 1;
            z-index:99;
            transform: rotate(180deg);
            animation-timing-function: ease-out;
        }

        7% {
            opacity: 1;
            transform: rotate(300deg);
            animation-timing-function: linear;
            origin:0%;
        }

        30% {
            opacity: 1;
            transform:rotate(410deg);
            animation-timing-function: ease-in-out;
            origin:7%;
        }

        39% {
            opacity: 1;
            transform: rotate(645deg);
            animation-timing-function: linear;
            origin:30%;
        }

        70% {
            opacity: 1;
            transform: rotate(770deg);
            animation-timing-function: ease-out;
            origin:39%;
        }

        75% {
            opacity: 1;
            transform: rotate(900deg);
            animation-timing-function: ease-out;
            origin:70%;
        }

        76% {
            opacity: 0;
            transform:rotate(900deg);
        }

        100% {
            opacity: 0;
            transform: rotate(900deg);
        }

        }
    </style>
    <script type="text/javascript">

        function createNavMenu()
        {
            var navMenu = document.getElementById("leftNavMenu");
            for (var i = 0; i < 5; i++)
            {
                var menuItem = document.createElement("div");
                menuItem.className = "navMenuItem";
                menuItem.innerHTML = "Stavka" + (i + 1);
                if (i == 0)
                    menuItem.style.marginTop = "150px";
                menuItem.style.marginTop = 35 + "px";

                navMenu.appendChild(menuItem);
            }
        }

        function fillAsync(kategorija)
        {
            var canvas = document.getElementById("canvas");
            canvas.innerHTML="";

            var tiles = new Array();
            var sizes = ["L", "S", "S", "M", "S", "S", "M", "L", "M", "M", "L", "S", "S", "M", "S", "S", "M", "L", "M", "M"];
            var colors = ["#cc33ff", "#ff9933", "#66cc00", "#ff3333", "#cc33ff", "#ff9933", "#66cc00", "#ff3333", "#cc33ff", "#ff9933", "#66cc00", "#ff3333", "#cc33ff", "#ff9933", "#66cc00", "#ff3333", "#cc33ff", "#ff9933", "#66cc00", "#ff3333"];

            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function ()
            {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                {
                    
                    var jsonArray = JSON.parse(xmlhttp.responseText);
                    
                    for (var i = 0; i < jsonArray.length; i++)
                    {
                        tiles[i] = createTile(jsonArray[i].id, sizes[i], "img/" + jsonArray[i].img_url + ".jpg", colors[i], jsonArray[i].naslov, jsonArray[i].podnaslov, jsonArray[i].opis, jsonArray[i].sadrzaj);
                    }

                    var j = 0;

                    var timer = setInterval(function () {
                        canvas.appendChild(tiles[j]);
                        j++;
                        if (j > tiles.length)
                            clearInterval(timer);
                    }, 5);
                    
                }
            }
            xmlhttp.open("GET", "http://www.balkanreporter.rs/public/kategorije/" + kategorija, true);
            xmlhttp.send();
        }

        function fill()
        {
            //createNavMenu();

            //document.getElementById("leftNavMenu").style.width = window.innerWidth % 600 - 17 + "px";

            var canvas = document.getElementById("canvas");
            canvas.innerHTML="";

            var tiles = new Array();
            var sizes = ["L", "S", "S", "M", "S", "S", "M", "L", "M", "M", "L", "S", "S", "M", "S", "S", "M", "L", "M", "M"];
            var colors = ["#cc33ff", "#ff9933", "#66cc00", "#ff3333", "#cc33ff", "#ff9933", "#66cc00", "#ff3333", "#cc33ff", "#ff9933", "#66cc00", "#ff3333", "#cc33ff", "#ff9933", "#66cc00", "#ff3333", "#cc33ff", "#ff9933", "#66cc00", "#ff3333"];

            for (i = 0; i < 10; i++)
            {
                tiles[i] = createTile(i, sizes[i], "img/img" + i + ".jpg", colors[i], "Title " + i, "Subtitle " + i, "Content ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentCont" + i);
                //canvas.appendChild(tiles[i]);
            }

            var j = 0;

            var timer = setInterval(function ()
            {
                if (j > tiles.length)
                    clearInterval(timer);
                canvas.appendChild(tiles[j++]);
            }, 5);
        }

        function createTile(id, size, imagePath, color, titleText, subtitleText, descriptionText, contentText)
        {
            
            var tile = document.createElement("div");
            tile.className = "tile";
            tile.style.backgroundImage = "url('" + imagePath + "')";
            tile.id = id;

            tile.onclick = function ()
            {
                createTileDetails(imagePath, color, titleText, subtitleText, "Šećerovski Nikola", contentText);
            };

            var overlay = document.createElement("div");
            overlay.className = "overlay";

            var like = document.createElement("div");
            like.className = "like";
            
            var likeButton = document.createElement("img");
            likeButton.src = "img/like-variation.png";
            likeButton.onclick = function () { alert("Like" + tile.id); };

            var noOflikes = document.createElement("div");
            noOflikes.className = "noOflikes";
            noOflikes.innerHTML = "31";///////////////////////////////////////////////

            var title = document.createElement("div");
            title.className = "title";
            title.innerText = titleText.toString().toUpperCase();

            tile.onmouseover = function () { title.style.backgroundColor = color; };
            tile.onmouseout = function () { title.style.backgroundColor = "transparent"; };

            var subtitle = document.createElement("div");
            subtitle.className = "subtitle";
            subtitle.innerText = subtitleText;

            var content = document.createElement("div");
            content.className = "content";
            content.innerText = descriptionText;

            var textWraper = document.createElement("div");
            textWraper.className = "textWraper";
            textWraper.appendChild(title);
            textWraper.appendChild(subtitle);
            textWraper.appendChild(content);

            var footer = document.createElement("div");
            footer.className = "footer";

            var facebookButton = document.createElement("img");
            facebookButton.src = "img/facebook-variation.png";

            var twitterButton = document.createElement("img");
            twitterButton.src = "img/twitter-variation-old.png";

            var gplusButton = document.createElement("img");
            gplusButton.src = "img/gplus-variation2.png";

            var youtubeButton = document.createElement("img");
            youtubeButton.src = "img/youtube-variation.png";

            var cut = document.createElement("img");
            cut.src = "img/scissors-24.png";

            switch (size) {
                case "S":
                    tile.style.width = "298px";
                    tile.style.height = "298px";
                    subtitle.style.fontSize = "1.55em";
                    content.style.fontSize = "0.7em"
                    break;
                case "M":
                    tile.style.width = "598px";
                    tile.style.height = "298px";
                    //title.style.bottom = "120px";
                    break;
                case "L":
                    tile.style.width = "598px";
                    tile.style.height = "598px";
                    //title.style.bottom = "120px";
                    break;
            }

            tile.appendChild(overlay);
            tile.appendChild(like);
            tile.appendChild(textWraper);
            tile.appendChild(footer);

            like.appendChild(likeButton);
            like.appendChild(noOflikes);

            footer.appendChild(facebookButton);
            footer.appendChild(twitterButton);
            footer.appendChild(gplusButton);
            footer.appendChild(youtubeButton);
            footer.appendChild(cut);

            return tile;
        }

        function createTileDetails(imagePath, color, titleText, subtitleText, authorName, conntentAll)
        {
            var tileDetails = document.createElement("div");
            tileDetails.id = "tile_details";

            var closeBtn = document.createElement("img");
            closeBtn.src = "img/x-mark-4-24.png";
            closeBtn.id = "closeBtn";
            closeBtn.onclick = function () { document.body.removeChild(tileDetails); };

            var like = document.createElement("div");
            like.className = "like";
            like.style.right = "0px";

            var likeButton = document.createElement("img");
            likeButton.src = "img/like-variation.png";
            likeButton.onclick = function () { alert("Like" + tile.id); };

            var noOflikes = document.createElement("div");
            noOflikes.className = "noOflikes";
            noOflikes.innerHTML = "31";

            var footer = document.createElement("div");
            footer.className = "footer";
            footer.style.bottom = "0px";

            var facebookButton = document.createElement("img");
            facebookButton.src = "img/facebook-variation.png";

            var twitterButton = document.createElement("img");
            twitterButton.src = "img/twitter-variation-old.png";

            var gplusButton = document.createElement("img");
            gplusButton.src = "img/gplus-variation2.png";

            var youtubeButton = document.createElement("img");
            youtubeButton.src = "img/youtube-variation.png";

            var cut = document.createElement("img");
            cut.src = "img/scissors-24.png";
            cut.style.opacity = "1";

            footer.appendChild(facebookButton);
            footer.appendChild(twitterButton);
            footer.appendChild(gplusButton);
            footer.appendChild(youtubeButton);
            footer.appendChild(cut);

            var image = document.createElement("div");
            image.id = "tile_details_main_img";
            image.style.backgroundImage = "url('" + imagePath + "')";

            var imageOverlay = document.createElement("div");
            imageOverlay.id = "tile_details_main_img_overlay";

            var title = document.createElement("div");
            title.id = "tile_details_main_title";
            title.style.backgroundColor = color;
            title.innerHTML = titleText;

            var subtitle = document.createElement("div");
            subtitle.id = "tile_details_main_subtitle";
            subtitle.innerHTML = subtitleText;

            var author = document.createElement("div");
            author.id = "tile_details_main_author";
            author.innerHTML = authorName;

            imageOverlay.appendChild(title);
            imageOverlay.appendChild(subtitle);
            imageOverlay.appendChild(like);
            imageOverlay.appendChild(footer);
            imageOverlay.appendChild(author);

            var content = document.createElement("div");
            content.id = "tile_details_main_content";
            content.innerHTML = conntentAll;

            like.appendChild(likeButton);
            like.appendChild(noOflikes);

            tileDetails.appendChild(image);
            tileDetails.appendChild(imageOverlay);
            tileDetails.appendChild(closeBtn);
            tileDetails.appendChild(content);

            document.body.appendChild(tileDetails);
        }

    </script>
</head>
<body onload='fillAsync("aktuelno")'>
    <div id="canvas"></div>
    <!--<div id="registracija_form">
        <table>
            <tr>
                <td>Registracija novog korisnika<br />Popunite formu za prijavu</td>
            </tr>
            <tr>
                <td><input type="text" placeholder="Ime" /></td>
            </tr>
            <tr>
                <td><input type="text" placeholder="Prezime" /></td>
            </tr>
            <tr>
                <td><input type="text" placeholder="Adresa" /></td>
            </tr>
        </table>
    </div>-->
    <!--<div class="windows8">
        <div class="wBall" id="wBall_1">
            <div class="wInnerBall">
            </div>
        </div>
        <div class="wBall" id="wBall_2">
            <div class="wInnerBall">
            </div>
        </div>
        <div class="wBall" id="wBall_3">
            <div class="wInnerBall">
            </div>
        </div>
        <div class="wBall" id="wBall_4">
            <div class="wInnerBall">
            </div>
        </div>
        <div class="wBall" id="wBall_5">
            <div class="wInnerBall">
            </div>
        </div>
    </div>-->

    <div id="leftNavMenu">
        <div id="logoContainer" onclick="fill()"><div id="logo"></div><div id="logo_text">Balkan<br />Reporter</div></div>
        <div class="navMenuItem" id="pretraga"><input type="text" placeholder="pretraga..." spellcheck="false" /><img src="img/icon_search.png" /></div>
        <ul>
            <li><div class="navMenuItem" id="aktuelno" onclick="fillAsync('aktuelno')"><img src="img/aktuelno.png" /><a>Aktuelno</a></div></li>
            <li><div class="navMenuItem" id="bez_stresa" onclick="fillAsync('bez_stresa')"><img src="img/bez_stresa.png" /><a>Bez stresa</a></div></li>
            <li><div class="navMenuItem" id="dijaspora_klub" onclick="fillAsync('dijaspora_klub')"><img src="img/dijaspora_klub.png" /><a>Dijaspora klub</a></div></li>
            <li><div class="navMenuItem" id="pomoc_prijatelja" onclick="fillAsync('pomoc_prijatelja')"><img src="img/pomoc_prijatelja.png" /><a>Pomoć prijatelja</a></div></li>
            <li><div class="navMenuItem" id="dijaspora_javlja" onclick="fillAsync('dijaspora_javlja')"><img src="img/dijaspora_javlja.png" /><a>Dijaspora javlja</a></div></li>
        </ul>
        <input type="text" placeholder="korisničko ime" spellcheck="false" />
        <input type="password" placeholder="lozinka" spellcheck="false" />
        <input type="button" value="Prijavi se" />
        <input id="registracija" type="button" value="Registracija" />
        <div id="footerContent"><a href="www.google.com">Pomoć</a> | <a href="www.google.com">Mapa sajta</a> | <a href="www.google.com">Uslovi korišćenja</a><br />Sva prava zadržana BalkanReporter©</div>
    </div>
</body>
</html>